<template>
<Layout>
    <div>
        <el-card
            shadow="never"
            style="
                min-height: 400px;
                margin-bottom: 20px;
                padding: 0px 0px 20px 0px;
            "
        >
            <el-tabs v-model="activeTab" type="card" @tab-click="onSelect">
                <el-tab-pane
                    :label="'粉丝 ' + $page.followers.pageInfo.totalItems"
                    name="followers"
                    style="padding: 5px"
                >
                    <div>
                        <div v-if="$page.followers.edges.length">
                            <el-row style="min-height: 200px">
                                <el-col
                                    :span="8"
                                    v-for="(item, index) in $page.followers.edges"
                                    :key="'followers' + index"
                                    style="padding: 10px"
                                >
                                    <el-card
                                        shadow="hover"
                                        style="
                                            font-size: 13px;
                                            color: #606266;
                                            line-height: 20px;
                                        "
                                    >
                                        <i class="el-icon-star-off"></i>&emsp;
                                        <g-link
                                            :to="'/social/user/'+item.node.id"
                                            style="
                                                text-decoration: none;
                                                cursor: pointer;
                                            "
                                            >{{ item.node.name }}</g-link
                                        >
                                        <br />
                                        <i class="el-icon-message"></i>&emsp;
                                        <a
                                            :href="item.node.htmlUrl"
                                            target="_blank"
                                            style="
                                                text-decoration: none;
                                                cursor: pointer;
                                            "
                                            >TA的主页</a
                                        >
                                        <br />
                                        <img
                                            :src="GRIDSOME_API_URL+item.node.avatarUrl.url"
                                            style="
                                                width: 100%;
                                                border-radius: 5px;
                                                margin-top: 5px;
                                            "
                                        />
                                    </el-card>
                                </el-col>
                            </el-row>
                            <div style="text-align: center; margin-top: 10px">
                                <pager :info="$page.followers.pageInfo"></pager>
                            </div>
                        </div>
                        <div
                            style="
                                min-height: 300px;
                                margin-bottom: 20px;
                                padding: 20px 0px 20px 0px;
                                text-align: center;
                            "
                            v-else
                        >
                            <font style="font-size: 30px; color: #dddddd">
                                <b>(￢_￢) 没有一个粉丝</b>
                            </font>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane
                    :label="'关注 ' + $page.following.pageInfo.totalItems"
                    name="following"
                    style="padding: 5px"
                >
                    <div>
                        <div v-if="$page.following.edges.length">
                            <el-row style="min-height: 200px">
                                <el-col
                                    :span="8"
                                    v-for="(item, index) in $page.following.edges"
                                    :key="'following' + index"
                                    style="padding: 10px"
                                >
                                    <el-card
                                        shadow="hover"
                                        style="
                                            font-size: 13px;
                                            color: #606266;
                                            line-height: 20px;
                                        "
                                    >
                                        <i class="el-icon-star-off"></i>&emsp;
                                        <g-link
                                            :to="'/social/user/'+item.node.id"
                                            style="
                                                text-decoration: none;
                                                cursor: pointer;
                                            "
                                            >{{ item.node.name }}</g-link
                                        >
                                        <br />
                                        <i class="el-icon-message"></i>&emsp;
                                        <a
                                            :href="item.node.htmlUrl"
                                            target="_blank"
                                            style="
                                                text-decoration: none;
                                                cursor: pointer;
                                            "
                                            >TA的主页</a
                                        >
                                        <br />
                                        <img
                                            :src="GRIDSOME_API_URL+item.node.avatarUrl.url"
                                            style="
                                                width: 100%;
                                                border-radius: 5px;
                                                margin-top: 5px;
                                            "
                                        />
                                    </el-card>
                                </el-col>
                            </el-row>
                            <div style="text-align: center; margin-top: 10px">
                                <pager :info="$page.following.pageInfo"></pager>
                            </div>
                        </div>
                        <div
                            style="
                                min-height: 300px;
                                margin-bottom: 20px;
                                padding: 20px 0px 20px 0px;
                                text-align: center;
                            "
                            v-else
                        >
                            <font style="font-size: 30px; color: #dddddd">
                                <b>(￢_￢) 还没有关注一个人</b>
                            </font>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </el-card>
    </div>
</Layout>
</template>

<page-query>
query($page: Int){
  	followers: allStrapiFans(perPage: 3, page: $page,
    filter: { isfans: { eq: "follow" }} )  @paginate{
		pageInfo{
	  		currentPage
	  		totalPages
            totalItems
		}
        edges{
            node{
                id
                name
                htmlUrl
                isfans
                location
                email
                githubUsername
                bio
                avatarUrl{
                    url
                }
            }
        }
    }
  	following: allStrapiFans(perPage: 3, page: $page,
    filter: { isfans: { eq: "care" }} )  @paginate{
		pageInfo{
	  		currentPage
	  		totalPages
            totalItems
		}
        edges{
            node{
                id
                name
                htmlUrl
                isfans
                location
                email
                githubUsername
                bio
                avatarUrl{
                    url
                }
            }
        }
    }
}
</page-query>

<script>
import { Pager } from "gridsome"
export default {
    components: {
        Pager
    },
    data() {
        return {
            activeTab: "followers",
        };
    },
    mounted() {
        this.onSelect();
    },
    methods: {
        onSelect() {
            switch (this.activeTab) {
                case "followers":
                    break;
                case "following":
                    break;
                default:
                    break;
            }
        },
    },
};
</script>